<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Stream</title>
</head>
<body>
    <video id="video" controls autoplay></video>
    <script>
        const videoElement = document.getElementById('video');
        const mediaSource = new MediaSource();
        videoElement.src = URL.createObjectURL(mediaSource);

        mediaSource.addEventListener('sourceopen', () => {
            const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
            const ws = new WebSocket('ws://localhost:7681'); // WebSocket 服务器地址

            ws.binaryType = 'arraybuffer'; // 接收二进制数据
            ws.onopen = () => {
                console.log('WebSocket connected');
            };

            ws.onmessage = (event) => {
                const videoData = event.data;

                // 将接收到的视频数据添加到 SourceBuffer 中
                sourceBuffer.appendBuffer(videoData);
            };

            ws.onerror = (error) => {
                console.error('WebSocket error:', error);
            };

            ws.onclose = () => {
                console.log('WebSocket connection closed');
            };
        });
    </script>
</body>
</html>

